<template>
  <el-dialog v-model="open" title="查看" width="400px" @open="openForm" @close="closeBtn" custom-class="center-dialog">
    <el-form :model="form" ref="formRef" label-width="100px" scroll-to-error>
      <el-form-item label="数据类型：" prop="typeCode" :rules="[{ required: true, message: '请选择数据类型！', trigger: 'change' }]">
        <el-select v-model="form.typeCode" clearable>
          <el-option v-for="item in codeOption" :key="item.tableName" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="confirmBtn">确定</el-button>
      <el-button plain @click="closeBtn">取消</el-button>
    </template>
  </el-dialog>

  <el-collapse-transition>
    <el-card class="query-tabs" v-if="isShowList">
      <p>
        <el-row :gutter="20" justify="start">
          <el-col :span="19.5" class="form-name">{{ typeCodeName }}数据</el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="downloadShp" v-if="tableList.length > 0">下载</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="deleteShpData" v-if="tableList.length > 0">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button plain @click="closeTable">关闭</el-button>
          </el-col>
        </el-row>
      </p>
      <el-table v-loading="tableLoading" :data="tableList" :border="true" stripe max-height="300">
        <el-table-column v-for="(item, index) in columnDataChecked" :key="item.fieldName" :label="item.name"
          :prop="item.fieldName" align="center" :min-width="minWidthSet(item.name)">
          <template #default="{ row }" v-if="checkDict(item.fieldName, originalCode)">
            <dict-tag :value="row[item.fieldName]" :code="checkDict(item.fieldName, originalCode)"></dict-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-collapse-transition>
</template>
<script setup>
import { getList, getField, getData, deleteShp } from '@/api/quickMapping/dataManage/dataManage'
import { minWidthSet } from '@/views/businessManage/common/minWidth'
import { checkDict } from '@/views/businessManage/common/dict'

const props = defineProps({
  open: Boolean
})
const emits = defineEmits(['update:open','selectIServerId'])
const { proxy } = getCurrentInstance()

const initForm = () => {
  return {
    typeCode: ''
  }
}
const form = reactive(initForm())
const codeOption = ref([])

// 获取数据类型
const getTypeCode = () => {
  getList().then(res => {
    codeOption.value = res.data
  })
}
const closeTable = () => {
  isShowList.value = false
  emits('selectIServerId',[])
}
const openForm = () => {
  nextTick(() => {
    proxy.$refs['formRef'].clearValidate()
  })
  getTypeCode()
}
const tableLoading = ref(false)
const tableList = ref([])
const columnDataChecked = ref([])
const typeCode = ref('')
const originalCode = ref('')
const typeCodeName = ref('')
const tableName = ref('')
const isShowList = ref(false)
// 查询
const confirmBtn = () => {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      typeCode.value = form.typeCode
      originalCode.value = codeOption.value.find(item => item.code == form.typeCode)?.originalCode
      typeCodeName.value = codeOption.value.find(item => item.code == form.typeCode)?.name
      tableName.value = codeOption.value.find(item => item.code == form.typeCode)?.tableName
      tableLoading.value = true
      getField({ code: form.typeCode }).then(res => {
        columnDataChecked.value = res.data
        if (columnDataChecked.value.length > 0) { isShowList.value = true }
        getData({ tableName: tableName.value }).then(res => {
          tableLoading.value = false
          tableList.value = res.data
          emits('update:open', false)
          let tableName = codeOption.value.find(item => item.code == form.typeCode)?.tableName
          emits('selectIServerId',{tableName: tableName,list: res.data})
        }).catch(err => {
          tableLoading.value = false
        })
      })
    }
  })
}
const closeBtn = () => {
  proxy.resetAllForm(form, initForm())
  emits('update:open', false)
}
// 下载
const downloadShp = () => {
  proxy.download(`/dataManage/${typeCode.value}/downLoadShp`, {}, `${typeCodeName.value}.zip`)
}
// 删除
const deleteShpData = () => {
  proxy.$modal.confirm('此操作将会删除所有活动断层数据，是否继续删除？').then(function () {
    return deleteShp({ tableName: tableName.value })
  }).then(res => {
    proxy.$modal.msgSuccess('删除成功！')
    isShowList.value = false
  }).catch(() => { })
}
defineExpose({
  isShowList
})
</script>
<style scoped>
.query-tabs {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
}
</style>